<template>
  <div style="width: 380px; margin: 0 0 20px 0; display: flex">
    <a-button style="margin: 0 10px" type="primary" @click="modalVisible = true">
      添加域名
    </a-button>
    <a-modal v-model:visible="modalVisible" title="添加域名" centered @ok="addDns" okText='添加域名' cancelText='取消' @cancel='cancel'>
      <div class="boder-row">
        <span class="d-Precautions-txt">
          <p>添加域名注意事项:</p>
          <p>
            <span></span>
            不要添加http://或者https://
          </p>
          <p>
            <span></span>
            添加域名请在服务器解析,反向代理后添加
          </p>
        </span>
        <a-input v-model:value="dnsvalue" placeholder="输入你要添加的域名" />
      </div>
    </a-modal>
    <a-button style="margin: 0 10px" type="primary" :loading="iconLoading" @click="enterIconLoading">
      刷新本页
    </a-button>
  </div>
  <DnsList :dnslist='dnslist' :pagination='pagination' :loading='loading' @onClickDelete='onClickDelete' @onDataLists='onDataLists' />
</template>

<script lang='ts'>
import { reactive, ref, toRefs } from "vue";
import DnsList from "@/components/DnsConfig/DnsList.vue";
import { $message } from "@/components/AntDesign/message";
import { appdns, getdns } from "@/api/dnsApi/index";
export default {
  components: {
    DnsList,
  },
  setup() {
    const data = reactive({
      dnslist: [],
      dnsvalue: "",
      loading: false,
      modalVisible: false,
      pagination: {
        total: 0,
        pageSize: 8,
        hideOnSinglePage: true,
        current: 1,
      },
    });

    /* 查询域名 */
    async function getDns(pageNo = 1) {
      try {
        data.loading = true;
        const result = await getdns({
          pageNo,
          pageSize: data.pagination.pageSize,
        });
        if (result.data.data) {
          result.data.data.forEach((element: any) => {
            element.key = element._id;
          });
          data.dnslist = result.data.data;
          data.pagination.total = result.data.total;
        }
        data.loading = false;
      } catch (error) {
        data.loading = false;
        $message("error", error.data.message);
      }
    }
    getDns();

    /* 分页事件 */
    function onDataLists(current: number) {
      getDns(current);
    }

    /* 关闭窗口事件监听 */
    function cancel() {
      data.dnsvalue = "";
    }

    /* 添加域名 */
    async function addDns() {
      try {
        const result = await appdns({
          dns: data.dnsvalue.replace(/[a-zA-z]+:\/\//, ""),
        });
        getDns();
        data.modalVisible = false;
        data.dnsvalue = "";
        $message("success", result.data.message);
      } catch (error) {
        $message("error", error.data.message);
      }
    }

    /* 刷新页面 */
    const iconLoading = ref<boolean>(false);
    function enterIconLoading() {
      iconLoading.value = true;
      getDns(data.pagination.current);
      //$message("success", "刷新成功");
      iconLoading.value = false;
    }

    /* 删除 */
    function onClickDelete(index: number) {
      // data.dnslist.splice(index, 1);
      enterIconLoading();
    }

    return {
      ...toRefs(data),
      addDns,
      cancel,
      onDataLists,
      enterIconLoading,
      iconLoading,
      onClickDelete,
    };
  },
};
</script>
<style lang="less" scoped>
.ant-input {
  width: 70%;
  display: block;
  margin: 0 auto;
}
.boder-row {
  margin-bottom: 20px;
}
.d-Precautions-txt {
  font-size: 14px;
  display: block;
  width: 60%;
  margin: 0 auto;
  span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #2f82ff;
  }
  p {
    margin: 10px 0;
  }
}
</style>